<template>
  <div class="wrapper">
    <swiper :options="swiperOption" >
      <!-- slides -->
      <swiper-slide  v-for="item of swiperList" :key = "item.id">
        <div  >
          <img class="swiper-img" :src="item.imgUrl" alt="">
        </div>
      </swiper-slide>

      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>

</template>

<script>
    export default {
        name: "HomeSwiper",
        data () {
          return {
            swiperOption: {
              pagination : '.swiper-pagination',
              loop:true
            },
            swiperList: [
              {
                id:'0001',
                imgUrl: "http://img1.qunarzz.com/piao/fusion/1807/66/e5a5cec881702f02.jpg_750x200_67bb5691.jpg"
              },
              {
                id:'0002',
                imgUrl: "http://img1.qunarzz.com/piao/fusion/1804/f2/91b285a08ee21c02.jpg_750x200_8a73fd08.jpg"
              },
              {
                id:'0003',
                imgUrl: "http://img1.qunarzz.com/piao/fusion/1804/bd/8e4a1c3f470d3702.jpg_750x200_f1f0a8c7.jpg"
              }
            ]
          }
        }
    }
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background : #ffffff !important
  .wrapper
    overflow : hidden
    width :100%
    height :0
    padding-bottom : 26.25%
    background : #eee
    .swiper-img
      width :100%
</style>
